<template>
  <div class="container">
    <HeaderImage :title="preview.title" :description="preview.description"></HeaderImage>
    <div class="article">
      <div class="markdown-body" v-html="preview.html"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRef, watch } from 'vue'
import type { Article } from '@/api/index'
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'github-markdown-css/github-markdown-dark.css'
import 'highlight.js/styles/monokai-sublime.css'
import HeaderImage from '@/components/HeaderImage.vue'

marked.setOptions({
  renderer: new marked.Renderer(),
  highlight: function (code) {
    return hljs.highlightAuto(code).value
  },
  langPrefix: 'hljs language-'
})

const props = defineProps<{
  article: Article
}>()

let preview = toRef(props, 'article')

watch(
  () => preview.value.content,
  (newValue) => {
    if (newValue) {
      preview.value['html'] = marked(newValue)
    }
  }
)
</script>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article {
  margin: 50px;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
